<template>
    <div class="institutions" v-if="value">
        <div class="blk"></div>
        <div class="org_box">
            <i class="el-icon-close close_icon" @click="closeDialog"></i>
            <h2 class="h2">机构入驻</h2>
            <div class="apply_form">
                <el-form ref="addForm" :model="addForm" label-width="0" :rules="addFormRules">
                    <el-form-item label="" prop="orgName">
                        <el-input v-model="addForm.orgName" class="a_input" placeholder="机构名称（必填）" />
                    </el-form-item>
                    <el-form-item label="" prop="city">
                        <el-cascader ref="carousel" v-model="addForm.city" class="a_select" popper-class="el_cascader"
                            :options="cityJson" :props="props" placeholder="所在城市"></el-cascader>
                    </el-form-item>
                    <el-form-item label="" prop="linkman">
                        <el-input v-model="addForm.linkman" class="a_input" placeholder="联系人（必填）" />
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="addForm.position" class="a_input" placeholder="职位" />
                    </el-form-item>
                    <el-form-item label="" prop="phone">
                        <el-input v-model="addForm.phone" class="a_input" maxlength="11" placeholder="联系手机（必填）" />
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" class="btn" :loading="loading" @click="saveApplyInfo">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { Select, Option, Input, Cascader, Form, FormItem } from "element-ui";
import cityJson from "@/assets/json/city.json";
import { PLATFORM_TYPE, ORGZASSIGNED_ASSIGNED_APPLY } from "@/http/interface";
import { PHONE_VALIDATOR } from '@/utils/validator'
import { deepClone, showToast } from '@/utils/utils'
export default {
    name: 'OrgSettlement',
    components: {
        [Form.name]: Form,
        [FormItem.name]: FormItem,
        [Select.name]: Select,
        [Option.name]: Option,
        [Input.name]: Input,
        [Cascader.name]: Cascader,
    },
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            addForm: {},
            cityJson,
            props: {
                value: "code",
                label: "name",
            },
            questionList: [],
            addFormRules: {
                orgName: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
                city: [{ required: true, message: '请选择您所在的城市', trigger: 'change' }],
                linkman: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: PHONE_VALIDATOR, trigger: 'blur' }],
            },
            loading: false
        }
    },
    methods: {

        // 保存信息
        saveApplyInfo() {
            let _this = this
            _this.$refs.addForm.validate(valid => {
                if (!valid) {
                    return false;
                }
                _this.sendInfo()
            })
        },

        // 发送请求
        async sendInfo() {
            let _this = this
            let nodes = _this.$refs.carousel.getCheckedNodes(true)[0]
            let o = deepClone(_this.addForm)
            let params = { ...o }
            params.city = nodes.data.code
            params.cityName = nodes.data.name;
            params.platform = PLATFORM_TYPE;
            _this.loading = true
            let res = await _this.$axios.post(ORGZASSIGNED_ASSIGNED_APPLY, params);
            _this.loading = false
            if (res.code == 200) {
                showToast({
                    message: "您已提交成功，我们会安排专人与您联系！",
                    type: 'success'
                });
                _this.closeDialog()
            }
        },

        // 关闭弹框
        closeDialog() {
            let _this = this;
            _this.addForm = {}
            // setTimeout(function () {
            //     _this.$refs.addForm.clearValidate()
            // }, 30)
            _this.$emit('input', false)
        }

    }
}
</script>
<style lang="less" scoped>
@import './organization.less';
</style>